import PropTypes from "prop-types"
import React, { memo, useState } from "react"
import { PicturesWrapper } from "./style"
import PictureBrowser from "@/base-ui/picture-browser"

const DetailPictures = memo((props) => {
    const [showBrowser, setShowBrowser] = useState(false)
    const [clickIndex, setClickIndex] = useState(0)
    const { pictureUrls } = props

    function showBrowserHandle(index) {
        setShowBrowser(true)
        // 总共在详情显示五张图 点击哪张 哪张就先显示在轮播图上
        setClickIndex(index)
    }

    function handleCloseClick() {
        setShowBrowser(false)
    }

    return (
        <PicturesWrapper>
            <div className="top">
                <div className="left">
                    <div className="item" onClick={() => showBrowserHandle(0)}>
                        <img src={pictureUrls[0]} alt="" />
                        <div className="cover"></div>
                    </div>
                </div>
                <div className="right">
                    {pictureUrls.slice(1, 5).map((item, index) => {
                        return (
                            <div
                                className="item"
                                key={item}
                                onClick={() => showBrowserHandle(index + 1)}
                            >
                                <img src={item} alt="" />
                                <div className="cover"></div>
                            </div>
                        )
                    })}
                </div>
                <div className="show-btn" onClick={(e) => showBrowserHandle(0)}>
                    查看照片
                </div>
                {showBrowser && (
                    <PictureBrowser
                        pictureUrls={pictureUrls}
                        closeClick={handleCloseClick}
                        clickIndex={clickIndex}
                    />
                )}
            </div>
        </PicturesWrapper>
    )
})

DetailPictures.propTypes = {
    pictureUrls: PropTypes.array,
}

export default DetailPictures
